<script setup lang="ts">

const props=defineProps({
  iconName: {
    type: String,
    required: true,
  },
  boxColor: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
</script>


<template>
  <div class="child">
    <div  :style="{  backgroundColor: props.boxColor }">
    <van-icon :name="props.iconName" size="1rem"/>
    </div>
    <span>{{ props.title }}</span>
  </div>
 
</template>


<style lang="scss" scoped>

.child{
  text-align: center;
  div{
    width: 1rem;
    height: 1rem;
    padding: 10px;
    border-radius: 10%;
    display: block;
  margin: 0 auto;
  }
  span{
      font-size: 0.5rem;
      // margin-top: 50px;
        }
}

</style>